<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper__item">
				<image class="swiper__item__img" src="/static/img/banner.jpg" mode="" />
			</view>
		</view>
		<!-- 导航区 -->
		<view style="width: 93.8%;height: 22.5rpx; padding: 9rpx 0;margin-left: 36rpx;">
			<!-- <text style="font-size: 28rpx;color: #686868;">我的服务</text> -->
		</view>
		<view class="nav-area" :style="serve.length<4?'height: 190rpx;':'height: 380rpx;'">
			<view class="nav-area__content" @click="goModule(item.url,item.logo,item.title)" v-for="(item, index) in serve" :key='index'
			 v-if="index<7">
				<view class="nav-area__content__shell">
					<image class="nav-area__content__shell__img" :src="item.logo" mode=""></image>
				</view>
				<view class="nav-area__content__text">
					<text>{{item.title}}</text>
				</view>
			</view>
			<view class="nav-area__content" @click="goMore">
				<view class="nav-area__content__shell">
					<image class="nav-area__content__shell__img" src="/static/icon/more.png" mode=""></image>
				</view>
				<view class="nav-area__content__text">
					<text>更多</text>
				</view>
			</view>
			<view class="kong" v-if="(serve.length + 1)%4 != 0" v-for="kongItem in (4-(serve.length + 1)%4)"></view>
		</view>
		<view style="width: 100%;height: 22.5rpx;background-color: rgba(248,248,248,1);"></view>
		<view v-if="item.title == '新闻'" style="width: 100%;" v-for="(item, index) in my_card_list" :key="index">
			<!-- tab -->
			<view class="tab">
				<view class="tab__left">
					<image class="tab__left__img" src="/static/icon/home_icon_new@2x.png" mode=""></image>
					<text class="tab__left__text">{{item.title}}</text>
				</view>
				<view class="tab__right" @click="goNewsList">
					<text class="tab__right__text">查看更多</text>
					<image class="tab__right__img" src="/static/icon/go.png" mode=""></image>
				</view>
			</view>
			<!-- 文章详情 -->
			<view class="details">
				<view class="details__box" @click="goDetail(detail)" v-if="d_index<3" v-for="(detail, d_index) in news_list" :key='d_index'>
					<view class="details__box__less" v-if="detail.newsImg.split(',').length <= 2">
						<view class="details__box__less__content">
							<view class="details__box__less__content__text"><text class="details__box__less__content__text__title" :style="detail.newsStatus == 0?'color: #333333;':'color: rgb(154,154,154);'">{{detail.newsTitle}}</text></view>
							<!-- <view class="details__box__less__content__info"><text class="details__box__less__content__info__text">{{detail.newsInfo}}</text></view> -->
							<view class="details__box__less__content__source">
								<text>{{detail.newsSource}}</text>
							</view>
							<view class="details__box__less__content__time">
								<text>{{detail.createTime}}</text>
							</view>
						</view>
						<view v-if="img_index < 1" v-for="(img_item,img_index) in detail.newsImg.split(',')"
						 :key="img_index" style="width: 213rpx;height: 213rpx;border-radius: 14rpx;">
							<image :src="img_item" style="width: 100%;height: 100%;border-radius: 14rpx;" mode="aspectFill"></image>
						</view>
					</view>
					<!-- 多图 -->
					<view class="details__box__many" v-if="detail.newsImg.split(',').length > 2">
						<view class="details__box__many__box">
							<view class="details__box__many__box__title"><text class="details__box__many__box__title__text" :style="detail.newsStatus == 0?'color: #333333;':'color: rgb(154,154,154);'">{{detail.newsTitle}}</text></view>
							<!-- <view class="details__box__many__box__info"><text>{{detail.newsInfo}}</text></view> -->
							<view class="details__box__many__box__content">
								<view class="details__box__many__box__content__item" v-if="img_index < 3" v-for="(img_item,img_index) in detail.newsImg.split(',')"
								 :key="img_index">
									<image class="details__box__many__box__content__item__img" :src="img_item" mode="aspectFill"></image>
								</view>
							</view>
							<view>
								<text class="details__box__many__box__source">{{detail.newsSource}}</text>
								<text class="details__box__many__box__time">{{detail.createTime}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 卡片管理 -->
		<view class="card-manage">
			<view class="card-manage__content" @click="goCardManage">
				<view class="card-manage__content__item" style="width: 32rpx;height: 32rpx;">
					<image class="card-manage__content__item__img" src="/static/icon/home_icon_card.png" mode=""></image>
				</view>
				<view class="card-manage__content__item">
					<text class="card-manage__content__item__text">首页卡片管理</text>
				</view>
				<image class="card-manage__content__img" src="/static/icon/go.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Debounce
	} from 'common/utils.js' // 防抖函数（减少函数的调用）
	import moment from 'utils/moment.min.js'

	export default {
		data() {
			return {
				serve: [], // 我的服务
				my_card_list: [], //我的卡片列表
				news_list: [], //新闻列表
				serve_info_list: [], //我的服务缓存
			}
		},
		onLoad() {
			let self = this
			self.getServe()
			self.initCard()
			self.serve_info_list = uni.getStorageSync('serve_info')
			if (!self.serve_info_list) {
				self.serve_info_list = []
			}
			uni.$on('index_card', function() {
				self.initCard()
			})
			uni.$on('index_serve', function() {
				self.getServe()
			})
			uni.$on('news_info', function() {
				self.getNewsList()
			})
		},
		methods: {
			/**
			 * @name 我的服务
			 */
			getServe() {
				let self = this
				self.$api.fAppServeGetMyList().then((res) => {
					console.log(res.data.result)
					self.serve = res.data && res.data.result || []
				})
			},

			/**
			 * @name 初始化卡片
			 */
			async initCard() {
				await this.getMyCardList() ? this.getNewsList() : '';
			},
			/**
			 * @name 获取我的卡片
			 */
			getMyCardList() {
				let self = this

				return new Promise((resolve, reject) => {
					self.$api.fAppCardGetMyList().then((res) => {
						self.my_card_list = res.data && res.data.result || []
						console.log(self.my_card_list);
						let BureauNews = self.my_card_list.filter(res => res.title == '新闻')
						BureauNews.length ? resolve(true) : reject(false);
					})
				})
			},
			/**
			 * @name 获取新闻列表
			 */
			getNewsList() {
				let self = this
				self.$api.fAppNewsList({
					pageNo: 1,
					pageSize: 10,
				}).then((res) => {
					// console.log(res.data.result.records);
					self.news_list = res.data && res.data.result && res.data.result.records || []
					self.news_list.forEach((item, index) => {
						item.createTime = moment(item.createTime).format('YYYY.MM.DD');
					})
				})
			},
			/**
			 * @name 卡片管理跳转
			 */
			goCardManage: Debounce(
				function() {
					uni.navigateTo({
						url: '/pages/index/cardManage/cardManage'
					})
				}),
			/**
			 * @name 更多服务跳转
			 */
			goMore: Debounce(
				function() {
					uni.navigateTo({
						url: '/pages/index/indexService/indexService'
					})
				}),
			/**
			 * @name 新闻列表跳转
			 */
			goNewsList: Debounce(
				function() {
					uni.navigateTo({
						url: '/pages/index/newsList/newsList'
					})
				}),
			/**
			 * @name 新闻详情跳转
			 */
			goDetail: Debounce(
				function(detail) {
					uni.navigateTo({
						url: '/pages/index/newsList/newDetail/newDetail?type=0&item=' + encodeURIComponent(JSON.stringify(detail))
					})
				}),
			/**
			 * @name 服务类型跳转
			 * @param  url  跳转路径
			 * @param  logo  logo图路径
			 * @param  title  标题
			 */
			goModule: Debounce(
				function(url, logo, title) {
					let serve_info = {
						title,
						logo,
						url
					}
					let filter_serve_info = this.serve_info_list.filter(res => res.title == title)
					if (this.serve_info_list.length == 0 || filter_serve_info.length == 0) {
						this.serve_info_list.unshift(serve_info)
						uni.setStorageSync('serve_info', this.serve_info_list)
						uni.$emit('card_serve_info')
					}
					let is_out_link = new RegExp("^http://.*").test(url)
					if (is_out_link) {
						let styles = {
							scalable: false,
							kernel: "WKWebview",
							disablePlus: false,
							backButtonAutoControl: "close", //Webview窗口自动处理返回键逻辑
							progress: {
								color: "#0081FF"
							},
							popGesture: "none",
							titleNView: {
								style: 'transparent',
								backgroundColor: "#FFFFFF",
								titleText: serve_info.title,
								color: "#333333",
								autoBackButton: true,
								'padding-right': '16px',
							},

						}
						// #ifdef APP-PLUS
						plus.webview.create(url, 'details', styles).show(); // 显示窗口
						// #endif
					}
					if (!is_out_link) {
						if (url === '/pages/') {
							uni.showToast({
								title: '此服务暂未开放,敬请期待',
								icon: 'none',
								duration: 1000,
							})
						} else {
							uni.navigateTo({
								url: url
							})
						}
					}
				}),
		},
		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			this.getServe()
			this.initCard()
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
			
		},
		onNavigationBarButtonTap: Debounce(
			function(e) {
				uni.navigateTo({
					url: '/pages/index/search/search'
				})
			}),
	}
</script>

<style scoped lang="less">
	.content {
		width: 100%;
		height: 500rpx;
	}

	.swiper {
		width: 100%;
		height: 313rpx;

		&__item {
			height: 100%;
			margin: 0 31.5rpx;
			border-radius: 22.5rpx;

			&__img {
				width: 100%;
				height: 100%;
				border-radius: 22.5rpx;
			}
		}
	}

	.kong {
		opacity: 0;
		width: 170rpx;
		height: 120rpx;
		margin-bottom: 24rpx;
		border-radius: 14rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.nav-area {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-wrap: wrap;

		&__content {
			width: 170rpx;
			height: 140rpx;
			border-radius: 14rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

			&__shell {
				width: 70rpx;
				height: 70rpx;
				border-radius: 14rpx;

				&__img {
					width: 100%;
					height: 100%;
				}
			}

			&__text {
				color: #333333;
				font-size: 26rpx;
			}
		}
	}

	.tab {
		width: 100%;
		padding: 34rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&__left {
			display: flex;
			align-items: center;
			justify-content: center;

			&__img {
				width: 36rpx;
				height: 36rpx;
				margin-left: 36rpx;
			}

			&__text {
				color: rgba(51, 51, 51, 1);
				font-weight: 700;
				font-size: 30rpx;
				margin-left: 14rpx;
			}
		}

		&__right {
			padding-right: 36rpx;
			display: flex;
			align-items: center;

			&__text {
				color: rgba(153, 153, 153, 1);
				font-size: 22rpx;
			}

			&__img {
				width: 14rpx;
				height: 12rpx;
				margin-left: 6rpx;
			}
		}
	}

	.details {
		width: 100%;
		margin-top: 16rpx;
		border-top: 2rpx solid rgba(248, 248, 248, 1);

		&__box {
			width: 93.7%;
			padding: 12rpx 22rpx;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			border-radius: 14rpx;
			margin-bottom: 6rpx;
			box-shadow: 0px 5px 20px 0px rgba(143, 143, 143, 0.1);

			&__less {
				width: 100%;
				height: 287rpx;
				padding: 12rpx 22rpx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				border-radius: 14rpx;

				&__content {
					width: 64%;
					height: 233rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					&__text {
						height: 76rpx;

						&__title {
							font-size: 30rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							word-break: break-all;
							-webkit-line-clamp: 3;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					&__info {
						height: 64rpx;

						&__text {
							font-size: 24rpx;
							color: rgba(102, 102, 102, 1);
							display: -webkit-box;
							-webkit-box-orient: vertical;
							word-break: break-all;
							-webkit-line-clamp: 3;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					&__source {
						font-size: 24rpx;
						color: rgba(49, 114, 182, 1);
						margin-top: 58rpx;
					}

					&__time {
						font-size: 24rpx;
						color: rgba(153, 153, 153, 1);
					}
				}
			}

			&__many {
				width: 100%;
				height: 520rpx;
				padding: 12rpx 22rpx;
				display: flex;
				align-items: center;
				border-radius: 14rpx;

				&__box {
					width: 100%;
					height: 466rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					&__title {
						height: 76rpx;

						&__text {
							font-size: 30rpx;
							color: #333333;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							word-break: break-all;
							-webkit-line-clamp: 2;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}

					&__info {
						width: 100%;
						height: 64rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 24rpx;
						color: rgba(102, 102, 102, 1);
					}

					&__content {
						width: 100%;
						height: 233rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						&__item {
							width: 32%;
							height: 233rpx;
							border-radius: 14rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							&__img {
								width: 100%;
								height: 100%;
								border-radius: 14rpx;
							}
						}
					}

					&__source {
						font-size: 24rpx;
						color: rgba(49, 114, 182, 1);
					}

					&__time {
						font-size: 24rpx;
						color: rgba(153, 153, 153, 1);
						margin-left: 32rpx;
					}
				}
			}
		}
	}

	.card-manage {
		width: 100%;
		height: 164rpx;
		background-color: rgba(248, 248, 248, 1);
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;

		&__content {
			background-color: #FFFFFF;
			width: 80%;
			height: 128rpx;
			border-radius: 64rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			&__item {
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&__img {
					width: 32rpx;
					height: 32rpx;
				}

				&__text {
					margin-left: 14rpx;
				}
			}

			&__img {
				width: 22rpx;
				height: 22rpx;
				margin-left: 14rpx;
				position: relative;
				top: 2rpx;
			}
		}
	}
</style>
